<template>
    <div class="mt-20px relative">
        <Three v-model="activeIndex" @update:model-value="handleTabClick" active-color="#ffffff">
            <template v-for="(item,index) in state.tabData" :key="index">
                <TabItem :label="item.rName" path="" :quantity="item.rValue" :index="index">
                    <div class="pt-26px pb-26px" v-if="state.isLoading">
                        <el-skeleton :rows="10" animated />
                    </div>
                    <template v-else>
                        <MarReportList :tableData="tableData" :page="page" @update:data="handleUpdateList" />
                    </template>
                </TabItem>
            </template>
        </Three>
        <div class="absolute top-8px right-0 text-12px text-#999999">本数据排序结果仅为参考，不代表来源平台立场</div>
    </div>
</template>
<script setup lang="ts">
import Three from '@/components/Tab/Three.vue'
import TabItem from '@/components/Tab/Item.vue'
import MarReportList from './MarReportList.vue'
import { ITabItem } from '@/api/geo/types'

const activeIndex = ref(0)

const props = defineProps<{
    ID:number,
    type:number,
    tableData: any[],
    tabData: any[],
    page: any
}>()

const state = reactive({
    tableData: [],
    page: {
        total: 0,
        curPage: 1,
        limit: 10,
        pageSizes: 10,
    },
    isLoading:false,
    stype:0,

    tabData: <ITabItem[]>[]
})

const emit = defineEmits(['update:data'])

function handleTabClick(val: any) {
    //每次切换的时候重置分页，重新获取数据
    const { index } = val
    state.stype = index
    activeIndex.value = index
    props.page.curPage = 1
    props.page.pageSizes = 10

    handleUpdateList(state)
}

async function handleUpdateList(value: any) {
    value.stype = state.stype
    emit('update:data', value)
}

watch(() => props.tabData, (newVal,oldVal) => {
    newVal.forEach((item: any) => {
        if(item.ID === props.ID){
            state.tabData = item.RDdetail
        }
    })
},{
    immediate: true
})

watch(() => props.type, () => {
    activeIndex.value = 0
    state.stype = 0
},{
    immediate: true
})

</script>
<style scoped>

</style>
